


.sidebar-view-item-value b { font-weight: bold; }
.sidebar-view-item-value code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; overflow: auto; white-space: pre-wrap; word-wrap: break-word; }
.sidebar-view-item-value pre { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0; overflow: auto; white-space: pre; word-wrap: normal; display: block; }
.sidebar-view-item-value-line { padding: 4px 6px 4px 6px; }
.sidebar-view-item-value-line-link { padding: 4px 6px 4px 6px; cursor: default; }
.sidebar-view-item-value-line-link:hover { text-decoration: underline; }
.sidebar-view-item-value-line-content { white-space: pre; word-wrap: normal; overflow: auto; display: block; }

.sidebar-view-item-select {
    font-family: inherit; font-size: 12px;
    background-color: #fcfcfc; border: #fcfcfc; color: #333;
    border-radius: 2px; width: 100%; height: 23px; padding: 3px 12px 3px 7px;
    margin-top: 3px; margin-bottom: 3px; box-sizing: border-box; outline: none;
    -moz-box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%);
    background-position: calc(100% - 12px) calc(10px), calc(100% - 7px) calc(10px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.sidebar-view-separator { margin-bottom: 20px; }

.sidebar-view-find input[type=text] { font-family: inherit; font-size: 13px; padding: 4px 6px 4px 6px; background: #fff; border-radius: 4px; border: 1px solid #ccc; outline: 0; }
.sidebar-view-find ol { list-style-type: none; overflow-y: auto; margin: 8px 0 20px 0; padding: 0; }
.sidebar-view-find li { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; margin: 0; padding: 5px 8px 5px 8px; outline: 0; white-space: nowrap; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.sidebar-view-find li:not(:first-child) { border-top: 1px solid #f0f0f0; }
.sidebar-view-find li:hover { background: #eee; }

.sidebar-view-documentation { font-size: 13px; line-height: 1.5; margin: 0; }
.sidebar-view-documentation h1 { font-weight: bold; font-size: 13px; line-height: 1.25; border-bottom: 1px solid #e8e8e8; padding-bottom: 0.3em; margin-top: 0; margin-bottom: 16px; }
.sidebar-view-documentation h2 { font-weight: bold; font-size: 11px; line-height: 1.25; margin-top: 20px; margin-bottom: 16px; text-transform: uppercase; border: 0; }
.sidebar-view-documentation h3 { font-weight: bold; font-size: 11px; line-height: 1.25; }
.sidebar-view-documentation p { margin-top: 4px; margin-bottom: 4px; margin-left: 0px; }
.sidebar-view-documentation a { color: #237; }
.sidebar-view-documentation code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; background-color: rgba(27, 31, 35, 0.05); padding: 0.2em 0.4em; margin: 0; border-radius: 3px; }
.sidebar-view-documentation pre { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; padding: 16px; overflow: auto; line-height: 1.45; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; }
.sidebar-view-documentation pre code { font-size: 13px; padding: 16px; line-height: 1.45; background-color: transparent; padding: 0; border-radius: 0; }
.sidebar-view-documentation tt { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-weight: bold; font-size: 90%; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; padding: 0.2em 0.4em; margin: 0; }
.sidebar-view-documentation dl dt { font-size: 13px; font-weight: bold; padding: 0; margin-top: 16px; margin-left: 0px; }
.sidebar-view-documentation dd { padding: 0 16px; margin-left: 0; margin-bottom: 16px; }
.sidebar-view-documentation ul { margin-top: 6px; margin-bottom: 6px; padding-left: 20px; }
.sidebar-view-documentation blockquote { margin-left: 15px; margin-right: 15px; }




@media (prefers-color-scheme: dark) {
    .sidebar html { color: #dfdfdf; }
    .sidebar { background-color: #2d2d2d; color: #dfdfdf; border-left: 1px solid #000; }
    .sidebar-closebutton { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #777777; opacity: 1.0; display: block; transition: 0.2s; position: absolute; top: 100px; right: 15px; margin-left: 50px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
    .sidebar-closebutton:hover { color: #ffffff; }
    .sidebar-view-item-select { background-color: #383838; border: #383838; color: #dfdfdf; background-image: linear-gradient(45deg, transparent 50%, #aaa 50%), linear-gradient(135deg, #aaa 50%, transparent 50%); }

    .sidebar-view-title { border-bottom-color: #2d2d2d; color: #dfdfdf; }
    .sidebar-view-title-button { color: #888888; border-color: #888888; }
    .sidebar-view-title-button:hover { color: #dfdfdf; border-color: #dfdfdf; }
    
    .sidebar-view-documentation h1 { border-bottom: 1px solid #424242; color: #dfdfdf; }
    .sidebar-view-documentation h2 { color: #dfdfdf; }
    .sidebar-view-documentation p { color: #aaaaaa; }
    .sidebar-view-documentation a { color: #6688aa; }
    .sidebar-view-documentation tt { background-color:#1e1e1e; }
    .sidebar-view-documentation code { background-color: #1e1e1e; }
    .sidebar-view-documentation pre { background-color: #1e1e1e; }

    .sidebar-view-find input[type=text] { background: #383838; color: #dfdfdf; border-color: #424242; }
    .sidebar-view-find li:not(:first-child) { border-top: 1px solid #2a2a2a; }
    .sidebar-view-find li:hover { background: #383838; }

}





.sidebar {
    width: 444px;
    position: relative;
    transition: 0.2s;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #ececec;
    color: #242424;
    overflow: hidden;
    padding: 40px;
}

.sidebar { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif; 
    font-size: 12px; 
    letter-spacing: 0px; 
    line-height: 16px;
    font-weight: 400; 
}

.sidebar-closebutton {
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #777777; 
    opacity: 1.0; 
    display: block; 
    transition: 0.2s; 
    position: absolute; 
    top: 0px; 
    right: 15px; 
    margin-left: 50px; 
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
}

.sidebar-closebutton:hover { 
    color: #242424;
}

.sidebar-closebutton {
    margin-top: 32px;
}

.sidebar-title,.sidebar-title {
    margin-top: 0;
}

.sidebar-title,.sidebar-view-header { 
    font-weight: 700; 
    font-size: 16px; 
    letter-spacing: 0px; 
    line-height: 24px;
    user-select: none;
}

.sidebar-view-item { 
    margin: 16px 0; 
    display: flex; 
    align-items: baseline;
}

.sidebar-view-item-name {
    min-width: 80px;
    text-overflow: ellipsis;
    outline: none;
    flex-grow: 1;
}
.sidebar-view-item-name input { 
    width: 100%;
    border: 0;
    outline: none;
    font-size: 12px;
    background-color: #ececec;
}


.sidebar-view-item-value-list {
    min-width: 265px;
    align-items: baseline;
    font-size: 12px;
    flex-grow: 2;
}

.sidebar-view-item-value {
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
}

.sidebar-view-item-value-line, .sidebar-view-item-value-list input[type="text"],textarea {
    width: 100%;
    box-sizing: border-box;
    margin-right: 9px;
    border-width: thin;
    border-style: solid;
    padding: 8px 16px;
    font-size: 12px;
    line-height: 16px;
}

.sidebar-view-item-value-expander {
    margin-left: 8px;
    width: 16px;
    cursor: pointer; 
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    display: flex;
    align-items: center;
}
.sidebar-view-item-value:has(> div:only-child):before {
    margin-left: 8px;
    width: 16px;
    content: "";
}


.sidebar-view-item-value-expander.off .off {
    display: none;
}

.sidebar-view-item-value-expander:not(.off) .on {
    display: none;
}

.sidebar-view-item-value-expander:hover { 
    color: #000; 
}

.sidebar-view-item-value-editers {
    min-width: 240px;
    flex: 1;
}

.sidebar-view-item-value-editers input,textarea {
    background-color: #f9f9f9;
}


.sidebar-view-item-value-line-border:not(:last-child) {
    border-bottom: 1px solid #3E4551;
}

 .sidebar-view-item-value-line-border,.sidebar-view-item-value-border { 
    margin: 0 12px; 
    padding: 16px 0; 
}

.sidebar-view-modifer-panel {
    display: flex;
    flex-direction: column;
    border-top-width: 1px;
    border-top-style: solid;
    position: absolute;
    bottom: 0px;
    background-color: #ececec;
    width: calc(100% - 80px);
    padding: 20px 40px;
}

.sidebar-view-modifer-buttons {
    display: flex;
    flex-direction: row;
    margin: 20px 0 20px 0;
}
.sidebar-view-modifer-buttons > button {
    flex: 1;
    margin: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    border-width: 1px;
    border-style: solid;
}

.sidebar-view-modifer-buttons > button:hover {
    background-color: #f9f9f9;
}

.sidebar-view-modifer-toolbar {
    display: flex;
    flex-direction: row;
    margin: 10px 0 10px 0;
    font-weight: 500;
}

.sidebar-view-modifer-toolbar > icon {
    width: 12px;
    height: 14px;
}

.sidebar-view-modifer-toolbar > div {
    flex: 1;
    display: flex;
    flex-direction: row;
    position: relative;
}

.sidebar-view-modifer-toolbar .title {
    margin-left: 9px;
}

.sidebar-view-modifer-toolbar .menu {
    border: 1px solid #0077FF;
}

.sidebar-view-modifer-toolbar .menu-item {
    height: 32px;
    line-height: 32px;
    padding: 4px;
    min-width: 220px;
    background-color: white;
    border: 1px solid #0077FF;
}
.sidebar-view-modifer-toolbar .menu-item:hover {
    background-color: #0077FF;
    border-radius: 0 0 1px 1px;
}

.sidebar-view-modifer-toolbar .menu {
    display: none;
}
.sidebar-view-modifer-toolbar > div:hover .menu {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    top: -10px;
    height: 10px;
}

.sidebar-content {
    height: calc(100% - 64px);
    overflow: auto;
}

.sidebar {
    padding: 40px 0 0 0;
}
.sidebar-content > div, .sidebar-title {
    padding-left: 40px;
    padding-right: 40px;
}

.sidebar-content > div:first-child {
    padding-bottom: 220px;
}

.graph-node-highlight > .node.border{
    stroke : url(#gradient-clicked);
    stroke-width: 2px;
}

.graph-node-extract-node > .node.border{
    stroke : url(#gradient-node);
    stroke-width: 2px;
}

.graph-node-extract-start > .node.border{
    stroke : url(#gradient-start);
    stroke-width: 2px;
}

.graph-node-extract-end > .node.border{
    stroke : url(#gradient-end);
    stroke-width: 2px;
}

.graph-node-extract-start.graph-node-extract-end > .node.border{
    stroke : url(#gradient-start-end);
    stroke-width: 2px;
}


@media (prefers-color-scheme: dark) {
    .sidebar { 
        color: #8D98AA;
        background-color: #1F2329;
    }
    .sidebar-view-item-name input { 
        color: #8D98AA;
        background-color: #1F2329;
    }
    .sidebar-view-item-value-line {
        color: #8D98AA;
        background-color:  #1F2329;
    }
    .sidebar-view-item-value-list input[type="text"],textarea {
        color: #8D98AA;
        background-color:  #1F2329;
    }
    .sidebar-view-modifer-buttons > button {
        background-color:  #1F2329;
    }
    .sidebar-view-item-value-editers {
        background-color: #2A2F37;
    }
    .sidebar-view-modifer-panel {
        color: #D3DCE9;
        background-color:  #1F2329;
    }
    .sidebar-view-modifer-toolbar .menu-item {
        background-color:  #1F2329;
    }
    .sidebar-view-modifer-toolbar .menu-item:hover {
        color: #ffffff;
    }
    .sidebar-view-modifer-buttons > button:hover {
        background-color: #2A2F37;
    }
    .sidebar-view-item-value-expander:hover {
        color: #ffffff;
    }
    .sidebar-closebutton:hover {
        color: #ffffff;
    }
    .sidebar-view-header,.sidebar-title { 
        color: #FFFFFE; 
    }
    
    .graph-node-highlight > .node.border{
        stroke : url(#gradient-clicked-black);
        stroke-width: 2px;
    }

    .graph-node-extract-node > .node.border{
        stroke : url(#gradient-node-black);
        stroke-width: 2px;
    }

    .graph-node-extract-start > .node.border{
        stroke : url(#gradient-start-black);
        stroke-width: 2px;
    }

    .graph-node-extract-end > .node.border{
        stroke : url(#gradient-end-black);
        stroke-width: 2px;
    }

    .graph-node-extract-start.graph-node-extract-end > .node.border{
        stroke : url(#gradient-start-end-black);
        stroke-width: 2px;
    }

    .sidebar-view-modifer-toolbar path {
        fill: rgba(255,255, 255);
    }
}